<template>
  <div class="flBox CascaderBox flex-box">
    <el-cascader ref="cascaderDom" v-model="val" filterable placeholder="添加多个标签请用逗号','隔开!" :options="list" :props="{
        multiple: true, checkStrictly: true ,
        label:'tagsName',value:'tagsId',
        children:this.children
      }"
      style="width: 100%" clearable :filter-method="filterAdd" @change="cascaderChange" :popper-class="option.class"
      @blur.native.capture="searchAdd" @keyup.enter.native="searchAdd" />
    <el-button v-show="searchVal" type="primary" @click="searchAdd">添加</el-button>
  </div>
</template>

<script>
  import {
    scrollTo
  } from '@/utils/scroll-to'
  export default {
    name: 'Pagination',
    props: {
      option: {
        type: [Object],
        default: () => {
          return {}
        }
      },
      list: {
        type: Array,
        default () {
          return []
        }
      },
      value: {
        default: () => []
      },
      children: {
        type: [String, Number]
      }
    },
    data() {
      return {
        childrens: this.children || 'tagsVoList',
        searchVal: '',
        val: this.value
      }
    },
    computed: {

    },
    watch: {
      value(value) {
        this.val = value
      },
      val(val) {
        this.$emit('update:value', val)
      }
    },
    created() {},
    mounted() {},
    methods: {
      CascaderBox() {
        var CascaderBox = this.$refs.cascaderDom.$refs.input.$refs.input
        CascaderBox.onkeydown = function(ev) {
          console.log("）sdasd ", ev)
          var event = ev || event
          if (event.keyCode == 13) {
            this.searchAdd()
          }
        }
      },
      searchAdd(val) {

        this.searchVal = this.searchVal.replace(/，/g, ',')
        console.log("this.searchVal", this.searchVal)
        const searchVal = this.searchVal;
        const that = this
        const vals = searchVal.split(',')
        var pusArr = this.option.name === 'activity' ? that.list[0] : that.list
        if (this.option.name === 'activity') {
          pusArr = that.list[0]
          vals.map((slist) => {
            if (slist) {
              pusArr[that.childrens].push({
                tagsName: slist,
                tagsId: '*' + slist
              })
              var docInp = document.getElementsByClassName('el-cascader__search-input')[0]
              docInp.value = ''
              console.log('value，inpt', docInp)
              that.val.push([pusArr.tagsId, '*' + slist])
            }
          })
        } else {
          vals.map((slist) => {
            if (slist) {
              pusArr.push({
                tagsName: slist,
                tagsId: '*' + slist
              })
              var docInp = this.$refs.cascaderDom.$refs.input.$refs.input // document.getElementsByClassName('el-cascader__search-input')[0]
              console.log('value，inpt', docInp)
              that.val.push(['*' + slist])
            }
          })
        }
        this.searchVal = ''

      },
      cascaderChange(val, serval) {
        console.log("sdsd ", val, serval)
        var lables = this.$refs.cascaderDom.getCheckedNodes()[0]
        let {
          pathLabels: label
        } = lables ? lables : {
          pathLabels: []
        }
        this.$emit('change', {
          val,
          label
        })
        if (this.searchVal) {
          this.searchAdd()
        }
      },
      filterAdd(node, keyword) {
        this.searchVal = keyword
        // console.log('node',node,keyword)
        this.$emit('filterAdd', keyword)
        return node.text.indexOf(keyword) > -1
      }
    }
  }
</script>
<style lang="scss">
  body {
    .CascaderBox .el-cascader {
      width: calc(100% - 72px);
    }

    // .cascaderBox {
    //   .el-cascader-panel {
    //     > div.el-cascader-menu:first-child {
    //       .el-cascader-menu__wrap > ul > li > label.el-checkbox {
    //         display: none;
    //       }
    //     }
    //   }
    // }
    .lessonUpdate,
    .activity {
      .el-cascader-panel {
        >div.el-cascader-menu:first-child {
          .el-cascader-menu__wrap>ul>li>label.el-checkbox {
            display: none;
          }
        }
      }
    }

  }
</style>
<style scoped>
</style>
